<template>
    <rx-fit>
        <a-tabs :default-active-key="selectMenus[0].key">
            <a-tab-pane v-for="menu in selectMenus" :tab="$i18(menu.title,'菜单名称')" :key="menu.key">
                <component :menuParams="menu.params" :menuId="menu.id" :is="menu.component"></component>
            </a-tab-pane>
        </a-tabs>
    </rx-fit>
</template>

<script>
import {RxFit} from "@lowcode/jpaas-common-lib"
import {getComponent, getSelectMenus} from "@/utils/routerUtil";
import {
    mapState
} from 'vuex'

export default {
    name: "MenuViewFuns",
    props: {
        menuId: String
    },
    components: {
        RxFit
    },
    data() {
        return {
            selectMenus: [],
            activeKey: "",
            curMenuId: this.menuId,
        }
    },
    computed: {
        ...mapState({
            appmenuId: (state) => state.appSetting.appmenuId,
            menuChildren: state => state.appSetting.menuChildren,
            menus: state => state.appSetting.menus,
        }),
    },
    created() {
        this.initMenus();
        this.curMenuId = undefined
    },
    watch: {
        appmenuId() {
            this.initMenus();
            this.curMenuId = undefined
        }
    },
    methods: {
        initMenus() {
            if (!this.curMenuId) {
                this.curMenuId = this.appmenuId;
            }
            this.selectMenus = getSelectMenus(this.menus, this.curMenuId);
            this.buildTree(this.selectMenus);
        },
        buildTree(list) {
            list.map(item => {
                item.component = this.getComp(item);
                if (item.children && item.children.length > 0) {
                    this.buildTree(item.children);
                }
            });
        },
        getComp(item) {
            if (item.menuType == 'C') {
                if (item.showType) {
                    if (item.showType == 'FUNS') {
                        return () => import('@/views/modules/system/core/MenuViewFuns');
                    } else if (item.showType == 'FUNS_BLOCK') {
                        return () => import('@/views/modules/system/core/MenuViewFunsBlock');
                    } else if (item.showType == 'FUN') {
                        return () => import('@/views/modules/system/core/MenuViewFun');
                    }
                }
            }
            return getComponent(item);
        }
    }
}
</script>

<style scoped>

</style>